<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>产品详情</title>
		<meta name = "viewport" content = "width = device-width, initial-scale = 1.0,
			 maximum-scale = 1.0, user-scalable = 0" />
		<link rel="stylesheet" href="../css/main.css" />
		
	</head>
	<body class="gray">
		<div id="marketDetail">
			<div class="return" style="background: #fff;">
				<strong @click="back"> < </strong>
				<span>详情</span>
			</div>
			<div class="product borderBottom">
				<div class="nameLogo">
					<img v-bind:src="details.url">
					<h4 style="font-weight: 500;">贷钱吗</h4>
					<dd v-if="details.type=='month'" class="lightGray">借款额度：{{details.minLimit}}-{{details.maxLimit}}万</dd>
					<dd v-if="details.type=='day'" class="lightGray">借款额度：{{details.minLimit}}-{{details.maxLimit}}元</dd>
					<dd v-if="details.type=='month'" class="lightGray">参考月利率：{{details.rate}}%</dd>
					<dd v-if="details.type=='day'" class="lightGray">参考日利率：{{details.rate}}%</dd>
				</div>
				<div class="applyNum">
					<dd class="lightGray">{{details.people}}人申请</dd>
					<dd>&nbsp;</dd>
					<dd class="lightGray">
						成功率：
						<img src="../images/star.png" v-for="n in details.success">
					</dd>
				</div>
				
			</div>
			<p class="speical" v-show="details.specicals != ''">{{details.specicals}}</p>
			<div class="product borderBottom">
				<div class="detailInfo">
					<label class="enterInput" v-if="details.type=='month'" style="margin-right:2.3rem;">
						金额<input type="text" maxlength="2" v-model="monthMon" 
							onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" />万
					</label>
					<label class="enterInput" v-if="details.type=='month'">
						期限<input type="text" maxlength="2" v-model="monthTime" 
							onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"/>个月
					</label>
					<label class="enterInput" v-if="details.type=='day'">
						金额<input type="text" maxlength="5" v-model="dayMon" 
							onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" />元
					</label>
					<label class="enterInput" v-if="details.type=='day'">
						期限<input type="text" maxlength="2" v-model="dayTime" 
							onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" />天
					</label>
					<div class="computes">
						<div class="moneyDetail">
							<dd v-if="details.type=='month'">
								{{Number(monthMon*10000*monthTime*(details.rate)/100)}}元
							</dd>
							<dd v-if="details.type=='day'">
								{{Number(dayMon)+Number(dayMon*dayTime*(details.rate)/100)}}元
							</dd>
							<span v-if="details.type=='month'" class="lightGray">预估月还款</span>
							<span v-if="details.type=='day'" class="lightGray">预估还款总额</span>
						</div>
						<div class="moneyDetail">
							<dd>{{details.rate}}%</dd>
							<span v-if="details.type=='month'" class="lightGray">参考月利息</span>
							<span v-if="details.type=='day'" class="lightGray">参考日利息</span>
						</div>
						<div class="moneyDetail" style="border-right:none;">
							<dd>{{details.lendTime}}</dd>
							<span class="lightGray">最快放款时间</span>
						</div>
					</div>
				</div>
			</div>
			
			<div class="product borderBottom">
				<div class="flow">
					<strong>·</strong>&nbsp;贷款流程
					<img src="../images/flow.png" />
				</div>
			</div>
			
			<div class="product borderBottom">
				<div class="flow">
					<strong>·</strong>&nbsp;申请条件
					<p v-html="details.requirements"></p>
				</div>
			</div>
			
			<div class="product borderBottom">
				<div class="flow">
					<strong>·</strong>&nbsp;所需材料
					<p v-html="details.stuffs"></p>
				</div>
			</div>
			
			<div class="product borderBottom">
				<div class="flow">
					<strong>·</strong>&nbsp;公司介绍
					<p v-html="details.company"></p>
				</div>
			</div>
			<br /><br />
			
			<div class="applyNow" @click="apply">立即申请</div>
			
		</div>
	</body>
	<script type="text/javascript" src="../js/rem.js" ></script>
	<script type="text/javascript" src="../js/vue.js" ></script>
	<script type="text/javascript" src="../js/axios.min.js" ></script>
	<script type="text/javascript">
		new Vue({
			el:"#marketDetail",
			data:{
				monthMon:1,
				monthTime:12,
				dayMon:1000,
				dayTime:7,
				details:{
					id:"1",type:"month",lendTime:"24小时",url:"../images/banner3.jpg",title:"贷钱吗",minLimit:1,
					maxLimit:50,rate:0.15,people:12345,success:4,isHot:"",
					requirements:"年龄要求22—60周岁;<br>微粒贷要求：申请人有微粒贷授信额度且使用过该额度，申请微粒贷额度大于10000元（必须用过，征信上体现深圳前海微众银行查询记录）",
					stuffs:"1,二代身份证<br>2,申请人简版人行征信报告",
					company:"大额现金分期，,实名认证注册即可免费申请借款,0门槛,在线极速审批!成功借款100%!0抵押0担保!",
					applyUrl:"http://sharedqm.daiqianma.cn/",
					specicals:"费率低、放款快、操作简单"
				}
			},
			created(){
				
			},
			methods:{
				back(){
					window.location.href="marketLoan.html";
				},
				apply(){
					window.location.href=this.details.applyUrl;
				}
				
			}
		})
	</script>
	
</html>
